<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<title>商品图片</title>
</head>

<body>

	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend>商品图片</legend>
	</fieldset>

	<form class="layui-form" id="myform" lay-filter="myform">
		<input type="hidden" id="proId" name="proId">
		<input type="hidden" id="imgId" name="imgId">
		<div class="layui-form-item">
			<label class="layui-form-label">商品图片</label>
			<div class="layui-input-inline">
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test1">上传图片</button>
				  <div class="layui-upload-list">
				    <img class="layui-upload-img" id="demo1" width="90px" height="90px">
				    <input type="hidden" id="imgPath" name="imgPath">
				    <p id="demoText"></p>
				  </div>
				</div>   
			</div>
		</div>
		<div class="layui-form-item" id="sjmc">
			<label class="layui-form-label">图片类型</label>
			<div class="layui-input-inline">
				<select name="imgType" id="imgType" lay-verify="" lay-search>
				  <option value="">选择图片类型</option>
				  <option value="1">展示图片</option>
				  <option value="2">滚动图片</option>
				  <option value="3">详情图片</option>
				</select> 
			</div>
		</div>
		<!-- 提交重置 -->
		<div class="layui-form-item">
			<div class="layui-input-block">
				<input type="button" class="layui-btn" lay-filter="userAdd" lay-submit=""
					value="立即提交" id="submit">
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>

	<script src="../layui/layui.js"></script>
	<script type="text/javascript"
		src="../res/js/jquery-1.10.2.js"></script>
	<script src="../res/js/base.two.js"></script>
	<script>
	layui.use(['form', 'layer','laydate','upload'], function(){
	  var form = layui.form
	  ,layer = layui.layer
	  ,laydate = layui.laydate
	  ,upload = layui.upload
	  ,$ = layui.$;
	  
	  var action = getParameter('action');
	  
	  if(action == "add"){
		  $("#proId").val(getParameter('proId'));
	  }else {
		  var url = "../productImage/findById.action";
		  var data = {"imgId":getParameter('imgId')};
		  $.ajax({
			  url:url,
			  data:data,
			  success:function(msg){
				  form.val("myform", {
					  "imgId": msg.imgId
					  ,"proId": msg.proId
					  ,"imgPath": msg.imgPath
					  ,"imgType": msg.imgType
					})
					$('#demo1').attr('src', "../"+msg.imgPath); //图片链接（base64）
			  }
		  });
	  }
	  
	  
	//普通图片上传
	  var uploadInst = upload.render({
	    elem: '#test1'
	    ,url: '../upload/uploadFile.action'
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#demo1').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      //上传成功
	      $("#imgPath").val(res.url);
	    }
	    ,error: function(){
	      //演示失败状态，并实现重传
	      var demoText = $('#demoText');
	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
	      demoText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	      });
	    }
	  });
	
	//添加
	$("#submit").click(function(){
		if($("#imgPath").val() == null || $("#imgPath").val() == ""){
			layer.msg("请上传图片",{icon:5,time:1000,anim:6});
		}else if($("#imgType").val() == null || $("#imgType").val() == ""){
			layer.msg("请选择图片类型",{icon:5,time:1000,anim:6});
		}else {
			var data = $("#myform").serialize();
			var url = "../productImage/saveOrUpdate.action";
			$.ajax({
				url:url,
				data:data,
				success:function(msg){
					layer.msg(msg.msg,{icon:1,time:1000},function(){
						parent.location.reload();
					});
				}
			});
		}
		
	});
	
});
</script>
</body>
</html>